<template>
    <!-- 后期图片上传时,裁剪固定大小为600*400后在进行上传 -->
    <div class="content-box">
        <a class="content-box-img" target="_blank" :href="module.moduleUrl">
            <img :src="module.imgUrl" alt="Image is lose!" />
        </a>
        <h2 class="content-box-title">{{ module.mName }}</h2>
        <p class="content-box-desc">{{ module.description }}</p>
        <div class="content-box-toolbar">
            <p>更新于:4小时前</p>
            <div class="content-box-toolbar-item">
                <el-icon size="15"><Comment/></el-icon>
                <p v-if="module.commentCount >= 999">999+</p>
                <p v-else>{{ module.commentCount }}</p>
            </div>
            <div class="content-box-toolbar-item">
                <el-icon size="15"><View/></el-icon>
                <p v-if="module.viewCount >= 999">999+</p>
                <p v-else>{{ module.viewCount }}</p>
            </div>
            <div class="content-box-toolbar-item">
                <el-icon size="15"><Star/></el-icon>
                <p v-if="module.likeCount >= 999">999+</p>
                <p v-else>{{ module.likeCount }}</p>
            </div>
        </div>
    </div>


</template>

<script setup lang="ts">
import { Comment,View,Star } from '@element-plus/icons-vue';
// 变量
defineProps(['module'])
</script>

<style scoped>
.content-box {
    width: 350px;
    height: 250px;
    margin: 20px;
    position: relative;
    display: inline-block;
    box-shadow: 2px 1px 10px 0px lightgray;
    border-radius: 10px;
    transition: 0.3s;
}

.content-box:active {
    scale: 0.97;
    box-shadow: none;
}

/* 以下所有内容高度+起来不应该超过content-box高度,也就是250px,注意包括上下边距*/
/* 卡片内容 */
/* ------------------------------------------------------ */
.content-box a {
    display: flex;
    /* 如果以后忘了不理解就把border边框加上调试 */
    height: 125px;
    /* 占用130px */
    margin: 5px 10px 0 10px;
}

.content-box img {
    border-radius: 1ch;
    width: 100%;
    object-fit: cover;
}

.content-box-title {
    font-size: smaller;
    height: 20px;
    /* 占用25px,剩余250-155=95 */
    margin: 5px 10px 0 10px;
}

.content-box-desc {
    margin: 5px 10px 0 10px;
    font-weight: 300;
    font-size: xx-small;
    height: 50px;
}

.content-box-toolbar {
    margin: 5px 10px 5px 10px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 25px;
    font-size: xx-small;
    font-weight: 100;
}

/* .content-box-toolbar */
/* ------------------------------------------------------ */
.content-box-toolbar-item {
    display: flex;
    align-items: center;
}
</style>